<template>

  <!-- 排序导航 -->
  <view class="orders">
    <uni-segmented-control style="width: 80%;" :current="currentDot" :values="orders"
      @clickItem="changeOrder"></uni-segmented-control>
  </view>

  <!-- <uni-swiper-dot @clickItem="clickItem" :info="dotinfo" :current="currentDot" field="text" mode="nav"> -->

  <swiper class="swiper-box" @change="changeDot" :current="swiperDotIndex">
    <swiper-item>
      <view class="swiper-item">
        <scroll-view :scroll-y="true" class="scroll-box">
          <view class="scroll-box-view">
            <!-- 新闻区 -->
            <view class="title">{{ info.title }}</view>
            <view v-html="info.content"></view>
            <view class="source">{{info.source}} {{info.postTime}}</view>
          </view>
        </scroll-view>

      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-item">
        <scroll-view :scroll-y="true" class="scroll-box">
          <!-- 评论区 -->
          <view class="scroll-box-view">

            <view class="" v-if="list && list.length>0">

              <view class="reply" v-for="d in list">
                <view class="">
                  <view class="logo" :style="`background-image: url(${tools.userlogo(d.user.user.id)});`"></view>
                </view>

                <view class="" style="margin-left: 0.5rem;">

                  <view class="">
                    {{d.content}}
                  </view>

                  <view class="reply-info">
                    {{d.user.user.username}}
                    -
                    {{tools.formatDate(d.createdAt)}}
                  </view>
                </view>

              </view>

            </view>
            <view class="" v-else>
              还没有评论，赶快抢个沙发
            </view>

          </view>
        </scroll-view>
      </view>
    </swiper-item>
  </swiper>

  <!-- </uni-swiper-dot> -->

  <!-- 发布评论区域 -->
  <view class="reply-form">

    <uni-easyinput v-model="content" placeholder="评论内容" />
    <uni-icons @click="replyNews" type="paperplane" size="35"></uni-icons>

  </view>

</template>

<script setup>
  import {
    nextTick,
    ref
  } from 'vue'
  import {
    api,
    tools
  } from '@/js/api.js'
  import {
    onLoad
  } from '@dcloudio/uni-app'

  const orders = ref(['详情', '评论'])

  const changeOrder = (event) => {
    currentDot.value = event.currentIndex
    swiperDotIndex.value = event.currentIndex
  }

  const currentDot = ref(0)
  const swiperDotIndex = ref(0)

  const changeDot = (e) => {
    currentDot.value = e.detail.current
    swiperDotIndex.value = e.detail.current
  }
  const clickItem = (e) => {
    swiperDotIndex.value = e
  }

  const dotinfo = [{
    text: '详情'
  }, {
    text: '评论'
  }]





  const content = ref('')

  const replyNews = () => {
    uni.showLoading({
      title: '发表评论中...'
    })
    api.post(`/autodata/info/news/reply/${id.value}`, {
      content: content.value
    }, (data) => {
      uni.hideLoading()
      uni.showToast({
        title: data.message
      })
      query()
    })
  }

  const current = ref(0)
  const values = ref(['详情', '评论'])

  const changeCurrent = (event) => {
    current.value = event.currentIndex
    if (event.currentIndex == 0) {
      scrollTo('#elenews')
    } else if (event.currentIndex == 1) {
      scrollTo('#elereply')
    }
  }

  const scrollTo = (selector) => {
    uni.pageScrollTo({
      selector: selector
    })
  }

  const id = ref(-1)

  onLoad((event) => {
    id.value = event.id
    query()
  })

  const page = ref({
    "pageSize": 10,
    "pageNumber": 1,
  })
  const info = ref({})
  const list = ref([])

  const query = () => {
    api.get(
      `/autodata/query/newsdetail/${id.value}/${page.value.pageSize}/${page.value.pageNumber}`, {}, (data) => {
        if (data.success) {
          page.value = data.data.pageBean
          info.value = data.data.info
          list.value = data.data.list
        } else {
          uni.showModal({
            content: data.message,
            title: '查询失败',
            complete: () => {
              uni.navigateBack()
            }
          })
        }
      }
    )

  }
</script>

<style scoped>
  .orders {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-box {
    height: calc(100vh - var(--window-top) - 4rem);
  }

  .scroll-box {
    height: calc(100vh - var(--window-top) - 6rem);
  }

  .scroll-box-view {
    padding: 1rem;
  }

  .scroll-box-view:deep(p) {
    line-height: 1.5;
    text-indent: 1em;
  }

  .reply-form {
    background-color: #ffffff;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: calc(100vw - 1rem);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    height: 3rem;
  }

  .main {
    padding: 1rem;
  }

  .title {
    font-weight: bold;
  }

  .source {
    font-size: 0.8rem;
    color: #666;
  }

  .info {
    margin: 0.5rem 0px;
  }

  .info:deep(p) {
    text-indent: 1em;
    line-height: 1.5;
  }

  .menus {
    position: sticky;
    position: -webkit-sticky;
    top: calc(var(--window-top));
    background-color: #ffffff;
    z-index: 10;
  }

  .logo {
    width: 3rem !important;
    height: 3rem !important;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

  .reply {
    display: flex;
    padding: 1rem 0px;
    align-items: flex-start;
  }

  .reply-info {
    padding: 0.5rem 0px;
    color: #666;
  }
</style>